<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      :inline="true"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item prop="userId" label="检验员">
        <el-select
          placeholder="请选择操作员工"
          filterable
          v-model="form.userId"
        >
          <el-option
            v-for="item in workerList"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="检验时间" prop="workTime">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.workTime"
        />
      </el-form-item>

      <el-form-item
        v-for="(waste, index) in form.wasteDOList"
        :label="'缺陷数量:'"
        :key="waste.key"
      >
        <el-input-number v-model="form.wasteDOList[index].num" />

        &nbsp;
        <b> 缺陷类型：</b>
        <el-select
          v-model="form.wasteDOList[index].wasteId"
          filterable
          @change="wasteChange(waste)"
        >
          <el-option
            v-for="item in wastList"
            :key="item.id"
            :label="item.type"
            :value="item.id"
            :class="optionStyle[item.color]"
          ></el-option>
        </el-select>
        &nbsp;
        <el-button type="danger" plain @click.prevent="removeWaste(waste)"
          >删除</el-button
        >
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="success" @click="addWaste">新增缺陷</el-button>
        <!-- <el-button @click="resetForm('dynamicValidateForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getWasteList, getWorkerList, addCheckData } from "@/api/work/check";
import * as dept from "@/common/deptEnum";
export default {
  props: ["batchId"],
  data() {
    return {
      dept: dept,
      paramsData: {},
      form: {
        userId: null,
        workTime: null,
        wasteDOList: [
          {
            num: "",
            workTime: null,
            wasteId: null,
          },
        ],
      },
      workerList: [],
      wastList: [],
      optionStyle: [
        "option_0",
        "option_1",
        "option_2",
        "option_3",
        "option_4",
        "option_5",
        "option_6",
      ],
      rules: {
        userId: [
          {
            required: true,
            message: "请选择检验员",
            trigger: "blur",
          },
        ],

        workTime: [
          {
            required: true,
            message: "请选择时间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getWaste();
    this.queryWorker();
  },
  methods: {
    getWaste() {
      getWasteList().then((res) => {
        this.wastList = res.data;
        console.log(this.wastList);
      });
    },
    removeWaste(item) {
      var index = this.form.wasteDOList.indexOf(item);
      if (index !== -1) {
        this.form.wasteDOList.splice(index, 1);
      }
    },
    addWaste() {
      this.form.wasteDOList.push({
        num: "",
        wasteId: null,
        key: Date.now(),
      });
    },
    queryWorker() {
      getWorkerList({ deptId: this.dept.JY_DEPT }).then((res) => {
        this.workerList = res.data;
        console.log(res);
      });
    },
    wasteChange(data) {
      this.wastList.forEach((waste) => {
        if (data.wasteId == waste.id) {
          data.processId = waste.processType;
        }
      });
    },
    submitForm() {
      let list = this.form.wasteDOList;
      list.forEach((l) => {
        l.workTime = this.form.workTime;
        l.userId = this.form.userId;
        l.batch = this.batchId;
      });

      addCheckData(this.form).then((res) => {
        console.log(res);
        this.msgSuccess("添加检验数据成功！");
        this.close();
      });
    },
    close(){
        this.$emit("closeMyself",false)
    }
  },
};
</script>
<style>
.option_0 {
  background-color: none;
}
.option_1 {
  background-color: gold;
}

.option_2 {
  background-color: green;
}

.option_3 {
  background-color: aqua;
}

.option_4 {
  background-color: darkorange;
}

.option_5 {
  background-color: darkviolet;
}

.option_6 {
  background-color: floralwhite;
}

.demo-dynamic {
  text-align: center;
}
</style>